<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <!-- Font Awesome 图标
Font Awesome 是一套绝佳的图标字体库和CSS框架。

Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。

要使用Font Awesome图标，请在HTML页面的 部分中添加以下行： -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <title>bootstrap表单的使用作业（11.23）.html</title>
    <style>
        #box{
            margin-top: 10px;
            width:100%;
            height: 500px;
            border: 1px solid black;
            display:flex;
        }
        #left{
            /* line-height: 50px; */
            margin-top: 120px;
            width:40%;
            height: 100%;
            /* border: 1px solid yellowgreen; */
            /* position: relative; */
            /* display:block; */
        }
        #right{
            width: 60%;
            height: 100%;
            /* border: 1px solid red; */
            /* float: right； */
            
        }
    </style>
</head>
<body>
    <div id="box" class="container" >
        <div id="left" >
            <h2>Fan? Drop a note</h2>
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-geo-alt" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12.166 8.94C12.696 7.867 13 6.862 13 6A5 5 0 0 0 3 6c0 .862.305 1.867.834 2.94.524 1.062 1.234 2.12 1.96 3.07A31.481 31.481 0 0 0 8 14.58l.208-.22a31.493 31.493 0 0 0 1.998-2.35c.726-.95 1.436-2.008 1.96-3.07zM8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10z"/>
                <path fill-rule="evenodd" d="M8 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm0 1a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
            </svg>
            Chiaago,US<br>
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-tablet" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M12 1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4z"/>
                <path fill-rule="evenodd" d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
            </svg>
            Phone:+00 15151515115<br>
            <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-envelope-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555zM0 4.697v7.104l5.803-3.558L0 4.697zM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757zm3.436-.586L16 11.801V4.697l-5.803 3.546z"/>
            </svg>
            Email:mail@mail.com
            
        </div>
        <div id="right">
            <h2>contact</h2>
            <h4>We Love our fans!</h4>
            <form class="form-inline">
                <div class="form-group" style="padding:20px;">
                    <!-- <label for="">账号</label> -->
                    <input type="text" id="username" class="form-control  " placeholder="请输入账号：" ></input>
                </div>
                <div class="form-group">
                    <!-- <label for="">密码</label> -->
                    <input type="password" id="pass" class="form-control" placeholder="请输入密码："></input>
                </div>
    
                <!-- <button class="btn btn-primary  active">登录</button> -->
            </form>
            <!-- <p></p> -->
            
            <form >
                <div class="form-group " style="padding:20px;">
                    <!-- <label for="content">评论：</label> -->
                    <textarea class="form-control" rows="8" id="content" name="content" placeholder="Comment" ></textarea>
                </div>
                <button class="btn btn-primary  active text-a" >登录</button>
            </form>

        </div>
    </div>
</body>
</html>